<template>
	<view class="container" :style="{ paddingBottom: `${safeAreaInsets?.bottom}px` }">
		<!--  #ifdef  MP-WEIXIN -->
		<custom :back="true" title="个人资料"></custom>
		<!--  #endif -->

		<view class="info">
			<view class="item">
				<view class="tit">头像</view>

				<view class="bg">
					<image class="avatar" :src="userInfo.avatar" lazy-load mode="widthFix" v-if="userInfo.avatar">
					</image>
					<uni-icons type="person-filled" size="32" color="#fff" v-else></uni-icons>
				</view>
			</view>

			<view class="item">
				<view class="tit">昵称</view>

				<view class="txt">{{ userInfo.user_name || '游客' }}</view>
			</view>

			<view class="item">
				<view class="tit">ID</view>

				<view class="txt">{{ userInfo.id }}</view>
			</view>
		</view>

		<view class="btn" data-eventsync="true" @click="getUserInfo">
			<text data-eventsync="true">同步</text>
			<!-- #ifdef MP-WEIXIN -->
			<text data-eventsync="true">微信</text>
			<!-- #endif -->

			<!-- #ifdef MP-TOUTIAO -->
			<text data-eventsync="true">抖音</text>
			<!-- #endif -->
			<!-- #ifdef MP-KUAISHOU -->
			<text data-eventsync="true">快手</text>
			<!-- #endif -->
			<text data-eventsync="true">用户信息</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'
	import { useUserStore } from '@/stores/user'
	import { setUserinfo } from '@/api/index'
	import { toast } from '@/utils/index'

	const systemStore = useSystemStore()
	const { safeAreaInsets } = storeToRefs(systemStore)
	const userStore = useUserStore()
	const { userInfo } = storeToRefs(userStore)

	const getUserInfo = () => {
		if (uni.getUserProfile) {
			uni.getUserProfile({
				desc: '用于获取用户个人信息',
				lang: 'zh_CN',
				success: async (res : UniApp.GetUserProfileRes) => {
					try {
						await setUserinfo({
							user_name: res.userInfo.nickName,
							avatar: res.userInfo.avatarUrl
						})
						userInfo.value.avatar = res.userInfo.avatarUrl
						userInfo.value.user_name = res.userInfo.nickName
						toast('同步成功！')
						// uni.navigateBack()
					} catch (e) {
						//TODO handle the exception
					}
				},
				fail(res) {
					console.log(res);
					toast('同步失败！')
				}
			})
		}
	
		// #ifdef MP-KUAISHOU
		uni.getUserInfo({
			desc: '用于获取用户个人信息',
			lang: 'zh_CN',
			success: async (res : UniApp.GetUserProfileRes) => {
				try {
					await setUserinfo({
						user_name: res.userInfo.nickName,
						avatar: res.userInfo.avatarUrl
					})
					userInfo.value.avatar = res.userInfo.avatarUrl
					userInfo.value.user_name = res.userInfo.nickName
					toast('同步成功！')
					// uni.navigateBack()
				} catch (e) {
					//TODO handle the exception
				}
			},
			fail(res) {
				console.log(res);
				toast('同步失败！')
			}
		})
		// #endif
	}
</script>

<style scoped lang="scss">
	.info {
		padding: 20rpx 30rpx;

		.item {
			position: relative;
			padding: 30rpx 0;
			@include tx(28rpx);
			@include flex(space-between, center);
			@include line(bottom, $color: #DCDCDC);

			&+.item {
				padding: 40rpx 0;
			}

			.tit {
				color: #323232;
			}

			.bg {
				@include size(88rpx);
				border-radius: 50%;
				background: #D0D0D0;
				@include center(flex);

				.avatar {
					@include size(88rpx);
					border-radius: 50%;
				}
			}

			.txt {
				color: #989898;
			}
		}

		.item:last-child::after {
			content: none;
		}
	}

	.btn {
		margin: 80rpx 30rpx 0;
		height: 88rpx;
		@include tx(32rpx, 88rpx);
		color: #fff;
		text-align: center;
		border-radius: 44rpx;
		background: #FF6918;
	}
</style>